<template>
  <div class="scoredetailwrapper zanwei-top">
    <head-nav></head-nav>
    <div
      class="scoredetail"
      v-if="rowobj"
    >
      <div class="scoredetail-top">
        <img :src="rowobj.TP[0]"/>
        <div class="pdinfo">
          <h3>{{rowobj.SPMC}}</h3>
          <span :style="textColor">{{rowobj.JF}}积分</span>
          <p>库存：{{rowobj.KC}}</p>
          <p v-if="rowobj.XGCS > 0">限购：{{rowobj.XGCS}}</p>
        </div>
      </div>
      <div class="scoredetail-center">
        <div
          class="contentA miaoshu"
          v-html="rowobj.MS"
        ></div>
        <div
          class="btn"
          @click="exchangeFn2(rowobj.ID)"
          :style="backgroundColor"
        >立即兑换
        </div>
        <span>已有{{rowobj.countLp}}人兑换</span>
      </div>
      <div
        class="contentA scoredetail-bottom"
        v-html="rowobj.DHGZ"
      >
        <!-- <div>
                  兑换需知 
                </div>
                <p>1.</p>
                <p>2.</p> -->

      </div>
    </div>
    <mt-popup
      class="sd_spec"
      v-model="specShow"
      position="bottom"
    >
      <div class="title">
        <span
          class="name"
          v-if="rowobj && rowobj.SPMC != null"
        >{{rowobj.SPMC}}</span>
        <span class="price" :style="textColor">{{sumAll}}积分</span>
        <div
          class="close"
          @click="speClose"
        >
          <i class="iconfont icon-close"></i>
        </div>
      </div>
      <div class="numb">
        <span>请选择数量</span>
        <ul>
          <li
            class="ico lef"
            @click="subNum"
          >
            <i class="iconfont icon-jianhao"></i>
          </li>
          <li class="ico mid">{{number}}</li>
          <li
            class="ico rig"
            @click="addNum"
          >
            <i class="iconfont icon-jiashangplus33"></i>
          </li>
        </ul>
      </div>
      <div
        class="qgbtn"
        @click="exchangeFn(rowobj.ID)"
        :style="backgroundColor"
      >立即兑换
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import api from "@/api/api";
  import {MessageBox, Toast, Popup} from "mint-ui";
  import {mapActions} from "vuex";

  export default {
    data() {
      return {
        rowobj: null,
        pdid: "",
        type: "",
        specShow: false,
        number: 1,
        buy: "",
        lx: null,
        userInfo: {},
        userId: ''
      };
    },
    computed: {
      sumAll() {
        if (this.rowobj && this.rowobj.JF != null) {
          return (this.rowobj.JF * this.number).toFixed(2);
        }
      }
    },
    created() {
      api.getUserInfo(this, res => {
        let data = res.data;
        if (data.code === 0) {
          this.userInfo = res.data.data;
        } else if (data.code === 9999) {
          //orcal数据库异常 关闭当前窗口
          MessageBox.alert(data.msg, '温馨提示').then(action => {
            wx.closeWindow()
          })
        } else {
          MessageBox("提示", data.msg);
        }
      });
    },
    methods: {
      ...mapActions({
        commit_title: "commit_title"
      }),
      exchangeFn2(lpid) {
        let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
        if (userinfo == null || userinfo.vipcode === "") {
          // 未登录
          Toast({
            message: "您还不是会员，快去注册吧！",
            duration: 1200
          });
          setTimeout(function () {
            //that.$router.push('/register')
            that.$router.push({
              path: "/register",
              query: {
                type: "scoredetail"
              }
            });
          }, 1500);
          return;
        }
        if (!this.$util.checkValidity()) return
        if (this.lx != 5) {
          //不是积分换流量类型，去选择数量
          let kc = this.rowobj.KC;
          let sfxg = this.rowobj.SFXG;
          let mrxggs = this.rowobj.MRXGGS;
          if (kc <= 0) {
            Toast({
              message: "抱歉, 已售完",
              duration: 1500,
              className: "myTisMask"
            });
            return;
          }
          if (sfxg == 1 && mrxggs <= 0) {
            Toast({message: "您已达到购买上限", duration: 1500, className: "myTisMask"});
            return;
          }
          this.specShow = true;
        } else {
          //==5积分换流量 直接抢购
          this.exchangeFn(lpid);
        }
      },
      exchangeFn(lpid) {
        let page = this;
        let lpsl = this.number;
        let buy = this.buy;
        this.specShow = false;
        //              page.specShow = true;
        //              return false;
        // 检查过期
        let userId = this.userId
        api.scoreToGiftDetail(page, userId, lpid, cb);

        function cb(res) {
          if (res.code !== 0) {
            Toast({
              message: res.msg,
              duration: 2000
            });
            setTimeout(function () {
              page.$router.go(-1);
            }, 2000);
          } else {
            let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));

            if (userinfo == null || userinfo.vipcode === "") {
              // 未登录
              Toast({
                message: "您还不是会员，快去注册吧！",
                duration: 1200
              });
              setTimeout(function () {
                //        that.$router.push('/register')
                that.$router.push({
                  path: "/register",
                  query: {
                    type: "scoredetail"
                  }
                });
              }, 1500);
              return;
            }
            MessageBox.confirm("确定下单吗?", "温馨提示").then(action => {
              if (action === "confirm") {
                api.scoreCreateOrder(page, userinfo.vipcode, lpid, lpsl, buy, cb);

                function cb(res) {
                  console.log("生订单");
                  console.log(res);
                  if (res.code == 0) {
                    let insertObj = {
                      pdid: res.data
                      // rowobj: this.rowobj
                    };
                    if (page.type == "game") {
                      // page.$router.push({path:'/Game'})
                      MessageBox({
                        message: "游戏券兑换成功",
                        confirmButtonText: "参与游戏"
                      }).then(action => {
                        page.$router.push({
                          path: "/gameCreate",
                          query: {
                            create: insertObj
                          }
                        });
                      });

                    } else if (page.lx == 5) {
                      MessageBox.confirm("成功兑换" + page.rowobj.SPMC + "，去充值？", "提示").then(
                        action => {
                          if (action === "confirm") {
                            page.$router.push({
                              path: "/FlowDetail",
                              query: {
                                ll: page.rowobj.SPMC,
                                phone: page.userInfo.XF_TELEPHONE,
                                oid: res.data,
                                islq: ''
                              }
                            });
                          }
                        }
                      );
                    } else {
                      page.$router.push({
                        path: "/scorecreate",
                        query: {
                          create: insertObj
                        }
                      });
                    }
                  } else {
                    Toast({
                      message: res.msg,
                      duration: 3000
                    });
                  }
                  page.number = 1;
                }
              }
            });
          }
        }
      },
      /**
       * @param ID 礼品ID
       */
      getGiftDetailFn(id, userId) {
        let page = this;
        api.scoreToGiftDetail(page, userId, id, cb);

        function cb(res) {
          if (res.code == 0) {
            let data = JSON.parse(res.data);
            console.log("jj");
            console.log(data);
            page.commit_title(data.SPMC);
            let TP = data.TP.map(x => {
              return page.host.filehost + x;
            });
            data.TP = TP;
            page.rowobj = data;
            page.lx = data.LX;

            page.$nextTick(function () {
              uParse(".contentA", {
                rootPath: "/static/libs/ueditor/"
              });
            });
          } else {
            Toast({
              message: res.msg,
              duration: 2000
            });
            setTimeout(function () {
              page.$router.go(-1);
            }, 2000);
          }
        }

      },
      // 数量减
      subNum() {
        if (this.number > 1) {
          this.number -= 1;
        } else {
          Toast({
            message: "数量最少为1",
            duration: 1500,
            className: "myTisMask"
          });
        }
      },
      // 数量加
      addNum() {
        let kc = this.rowobj.KC;
        let sfxg = this.rowobj.SFXG;
        let mrxggs = this.rowobj.MRXGGS
        if (this.number < kc) {
          if (sfxg == 1) { //0不限购 1 限购
            if (this.number < mrxggs) {
              this.number += 1;
            } else {
              if (mrxggs <= 0) {
                Toast({message: "您已达到购买上限", duration: 1500, className: "myTisMask"});
              } else {
                Toast({message: "限购" + mrxggs + "个", duration: 1500, className: "myTisMask"});
              }
            }
          } else {
            //不限购
            this.number += 1;
          }
        } else {
          Toast({
            message: "库存不足",
            duration: 1500,
            className: "myTisMask"
          });
        }
      },
      // 关闭规格层
      speClose() {
        this.specShow = false;
      }
    },
    mounted() {
      let id = this.$route.params.id;
      this.pdid = id;
      this.type = this.$route.query.type;
      // let msg = this.$route.params.msg
      if (this.type == "game") {
        this.commit_title("游戏兑换");
      }
      var userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
      if (userinfo && userinfo.vipcode) {
        let userId = userinfo.vipcode;
        this.userId = userId;
        this.getGiftDetailFn(id, userId);
      }
      // if(msg == 1){
      //     msg = "请购买游戏券";
      // }
      // if(msg == 2){
      //     msg = "游戏券已使用";
      // }
      // if(msg == 3){
      //     msg = "未找到游戏券";
      // }
      // if(msg == 4){
      //     msg = "游戏券已过期";
      // }
      // if(msg!=""){
      //     MessageBox({
      //         title: "提示",
      //         message: msg,
      //         showCancelButton: true,
      //         showCancelButton: false,
      //         confirmButtonText: "兑换",
      //         closeOnClickModal: false,
      //         confirmButtonClass: "zcbtn"
      //     }).then(action => {

      //     });
      // }

    }
  };
</script>

<style lang="less">
  .scoredetailwrapper {
    ul {
      list-style: none;
    }
  }

  .scoredetail {
    padding: 0.2rem;

    .scoredetail-top {
      display: flex;
      padding-top: 0.2rem;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #cbcbcc;
        transform: scaleY(0.5);
        transform-origin: 0 100%;
      }

      img {
        width: 1.7rem;
        height: 1.5rem;
        border: #d4d4d4 solid 1px;
        margin: 0 0.2rem 0.2rem 0.1rem;
      }

      .pdinfo {
        flex: 1;
        margin-bottom: 0.2rem;

        h3 {
          font-size: 0.28rem;
        }

        span {
          font-size: 0.28rem;
          display: block;
          color: #F05DC4;
          margin-top: 0.1rem;
        }

        p {
          width: 100%;
          font-size: 0.24rem;
          margin-top: 0.06rem;
        }
      }
    }

    .scoredetail-center {
      padding-top: 0.3rem;
      padding-bottom: 0.4rem;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .miaoshu {
        width: 100%;
        margin-bottom: 0.2rem;
      }

      &::before {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #cbcbcc;
        transform: scaleY(0.5);
        transform-origin: 0 100%;
      }

      /* p {
              font-size: 0.28rem;
              margin: 0.2rem;
            } */

      .btn {
        width: 4.76rem;
        height: 0.9rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.1rem;
        background: #F05DC4;
        color: #ffffff;
      }

      span {
        font-size: 0.24rem;
        color: #000000;
        margin-top: 0.1rem;
      }
    }

    .scoredetail-bottom {
      padding: 0.3rem 0.2rem;
    }
  }

  .zcbtn {
    font-size: 0.32rem;
    color: #F05DC4;
  }

  .sd_spec {
    width: 100%;
    padding-top: 0.3rem;

    .title {
      padding: 0 0.3rem;
      font-size: 0.36rem;
      line-height: 0.8rem;
      font-weight: bold;
      position: relative;
      align-items: center;
      display: flex;

      .name {
        max-width: 4.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        color: #ee0017;
        margin-left: 0.15rem;
      }

      .close {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        border: 0.01rem solid #dcdcdc;
        text-align: center;
        line-height: 0.6rem;
        position: absolute;
        top: -0.1rem;
        right: 0.3rem;
        color: #dcdcdc;

        i {
          font-size: 0.3rem;
        }
      }
    }

    .hasxz {
      padding: 0 0.3rem;
      height: 0.5rem;
      display: flex;
      align-items: center;

      .selBox {
        margin: 0 0.1rem;
      }
    }

    .types {
      padding: 0 0.3rem;
      padding-bottom: 0.15rem;

      .tit {
        line-height: 0.6rem;
        font-size: 0.28rem;
      }

      .ilist {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
          width: 1.56rem;
          height: 0.7rem;
          border: 0.01rem solid #e6e6e6;
          border-radius: 0.06rem;
          font-size: 0.26rem;
          margin-bottom: 0.1rem;
          text-align: center;
          line-height: 0.7rem;
        }

        li.selit {
          background-color: #f05dc4;
          color: #ffffff;
        }
      }
    }

    .numb {
      border-top: 0.01rem solid #e6e6e6;
      height: 1rem;
      padding: 0 0.27rem 0 0.42rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 0.34rem;
      }

      ul {
        display: flex;
        align-items: center;

        li {
          font-size: 0.36rem;
          width: 0.64rem;
          height: 0.64rem;
          line-height: 0.62rem;
          text-align: center;
        }

        .lef,
        .rig {
          font-size: 0.5rem;
          border-radius: 50%;
          background-color: #f0f0f0;
          color: #b3b3b3;
        }

        .mid {
          margin: 0 0.05rem;
          line-height: 0.64rem;
        }

        li.addsub {
          color: #f05dc4;
        }
      }
    }

    .qgbtn {
      width: 100%;
      height: 0.96rem;
      line-height: 0.96rem;
      text-align: center;
      font-size: 0.34rem;
      color: #ffffff;
      background-color: #f05dc4;
    }
  }
</style>
